@page "/JsonPath"
@using Newtonsoft.Json.Linq

<PageTitle>JSONPath 解析</PageTitle>

<div class="jsonpath-container">
    <h1>JSONPath 解析</h1>

    <div class="query-row">
        <label for="jsonpathInput">JSONPath 查询:</label>
        <input id="jsonpathInput" class="query-input" @bind="jsonPathExpr" placeholder="例如：$.book[*].author 或 $.store.book[0].title" />
        <button class="btn btn-primary" @onclick="Evaluate">执行</button>
        <button class="btn btn-secondary" @onclick="FormatJson">格式化左侧JSON</button>
        <button class="btn btn-warning" @onclick="ClearAll">清空</button>
    </div>

    <div class="panes">
        <div class="pane">
            <label>输入JSON</label>
            <textarea @bind="inputJson" placeholder="在此粘贴 JSON..."></textarea>
        </div>
        <div class="pane">
            <label>输出结果</label>
            <textarea readonly value="@output"></textarea>
        </div>
    </div>
</div>

@code {
    private string jsonPathExpr = "";
    private string inputJson = "{\n  \"store\": {\n    \"book\": [\n      { \"category\": \"reference\", \"author\": \"Nigel Rees\", \"title\": \"Sayings of the Century\", \"price\": 8.95 },\n      { \"category\": \"fiction\", \"author\": \"Evelyn Waugh\", \"title\": \"Sword of Honour\", \"price\": 12.99 }\n    ]\n  }\n}";
    private string output = string.Empty;

    private void Evaluate() {
        try {
            if (string.IsNullOrWhiteSpace(inputJson)) {
                output = "请输入有效的 JSON";
                return;
            }

            var token = JToken.Parse(inputJson);

            if (string.IsNullOrWhiteSpace(jsonPathExpr)) {
                // 无查询表达式时，直接回显格式化JSON
                output = token.ToString(Newtonsoft.Json.Formatting.Indented);
                return;
            }

            var results = token.SelectTokens(jsonPathExpr).ToList();
            if (results.Count == 0) {
                output = "未匹配到结果";
                return;
            }

            // 将结果序列化为整洁的 JSON 数组
            var array = new JArray(results);
            output = array.ToString(Newtonsoft.Json.Formatting.Indented);
        } catch (Exception ex) {
            output = $"解析或查询出错: {ex.Message}";
        }
    }

    private void FormatJson() {
        try {
            if (string.IsNullOrWhiteSpace(inputJson)) return;
            var token = JToken.Parse(inputJson);
            inputJson = token.ToString(Newtonsoft.Json.Formatting.Indented);
        } catch (Exception ex) {
            output = $"格式化失败: {ex.Message}";
        }
    }

    private void ClearAll() {
        jsonPathExpr = string.Empty;
        inputJson = string.Empty;
        output = string.Empty;
    }
}

<style>
    .jsonpath-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 24px;
    }

    .query-row {
        display: flex;
        gap: 12px;
        align-items: center;
        margin-bottom: 16px;
    }

    .query-input {
        flex: 1;
        padding: 8px 10px;
        border: 1px solid #ddd;
        border-radius: 6px;
    }

    .panes {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .pane {
        display: flex;
        flex-direction: column;
    }

        .pane label {
            font-weight: 600;
            margin-bottom: 8px;
        }

        .pane textarea {
            width: 100%;
            min-height: 360px;
            font-family: 'Fira Code', 'Consolas', 'Courier New', monospace;
            font-size: 14px;
            padding: 12px;
            border: 1px solid #e1e5e9;
            border-radius: 8px;
            resize: vertical;
        }

    .btn {
        padding: 8px 16px;
        border-radius: 6px;
        border: none;
        cursor: pointer;
    }

    .btn-primary {
        background-color: #007bff;
        color: #fff;
    }

    .btn-secondary {
        background-color: #6c757d;
        color: #fff;
    }

    .btn-warning {
        background-color: #ffc107;
        color: #212529;
    }

    @@media (max-width: 768px) {
        .query-row {
            flex-direction: column;
            align-items: stretch;
        }

        .panes {
            grid-template-columns: 1fr;
        }
    }
</style>


